<template>
  <view class="favorite">
    <view class="favorite-tabs">
      <el-tabs v-model="activeTab" @change="tabChange">
        <el-tab-pane label="商品" name="goods"></el-tab-pane>
        <el-tab-pane label="店铺" name="shop"></el-tab-pane>
      </el-tabs>
    </view>
    
    <view class="favorite-list">
      <el-empty v-if="favoriteList.length === 0" description="暂无收藏"></el-empty>
      <view v-else>
        <view v-for="(item, index) in favoriteList" :key="index" class="favorite-item">
          <el-checkbox v-model="item.selected" @change="handleItemChange(index)"></el-checkbox>
          <el-image :src="item.image" mode="aspectFill" @click="goToDetail(item)"></el-image>
          <view class="item-info" @click="goToDetail(item)">
            <view class="item-name">{{ item.name }}</view>
            <view class="item-price" v-if="activeTab === 'goods'">¥{{ item.price }}</view>
            <view class="item-sales" v-if="activeTab === 'goods'">已售 {{ item.sales }}件</view>
            <view class="item-address" v-if="activeTab === 'shop'">{{ item.address }}</view>
            <view class="item-fans" v-if="activeTab === 'shop'">粉丝 {{ item.fans }}人</view>
          </view>
          <el-icon name="delete" @click="deleteFavorite(item.id)"></el-icon>
        </view>
      </view>
    </view>
    
    <view class="favorite-footer" v-if="favoriteList.length > 0 && editMode">
      <el-checkbox v-model="selectAll" @change="handleSelectAll"></el-checkbox>
      <view class="footer-text">全选</view>
      <el-button type="danger" @click="batchDelete">删除选中</el-button>
    </view>
    
    <view class="edit-btn" v-if="favoriteList.length > 0 && !editMode" @click="toggleEditMode">
      <el-icon name="edit"></el-icon>
      <view class="btn-text">编辑</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'goods',
      favoriteList: [],
      selectAll: false,
      editMode: false
    }
  },
  onShow() {
    this.getFavoriteList()
  },
  methods: {
    async getFavoriteList() {
      try {
        const res = await this.$api.get('/favorite/list', {
          type: this.activeTab
        })
        this.favoriteList = res.map(item => ({
          ...item,
          selected: false
        }))
        this.updateSelectAllStatus()
      } catch (error) {
        this.$toast.fail(error.message || '获取收藏列表失败')
      }
    },
    tabChange(tab) {
      this.activeTab = tab
      this.getFavoriteList()
      this.editMode = false
    },
    updateSelectAllStatus() {
      this.selectAll = this.favoriteList.every(item => item.selected)
    },
    handleSelectAll() {
      this.favoriteList.forEach(item => {
        item.selected = this.selectAll
      })
    },
    handleItemChange(index) {
      this.updateSelectAllStatus()
    },
    toggleEditMode() {
      this.editMode = !this.editMode
    },
    async deleteFavorite(id) {
      uni.showModal({
        title: '提示',
        content: '确定要取消收藏吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$api.post('/favorite/delete', {
                id,
                type: this.activeTab
              })
              this.getFavoriteList()
              this.$toast.success('已取消收藏')
            } catch (error) {
              this.$toast.fail(error.message || '操作失败')
            }
          }
        }
      })
    },
    async batchDelete() {
      const selectedIds = this.favoriteList
        .filter(item => item.selected)
        .map(item => item.id)
      
      if (selectedIds.length === 0) {
        this.$toast('请选择要删除的收藏')
        return
      }
      
      uni.showModal({
        title: '提示',
        content: `确定要取消选中的${selectedIds.length}个收藏吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$api.post('/favorite/delete', {
                ids: selectedIds,
                type: this.activeTab
              })
              this.getFavoriteList()
              this.editMode = false
              this.$toast.success('已取消收藏')
            } catch (error) {
              this.$toast.fail(error.message || '操作失败')
            }
          }
        }
      })
    },
    goToDetail(item) {
      if (this.editMode) return
      
      if (this.activeTab === 'goods') {
        uni.navigateTo({
          url: `/pages/goods/detail?id=${item.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/shop/detail?id=${item.id}`
        })
      }
    }
  }
}
</script>

<style>
.favorite {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 60px;
}
.favorite-tabs {
  background-color: #fff;
  margin-bottom: 15px;
}
.favorite-list {
  padding: 15px;
}
.favorite-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
}
.favorite-item image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin: 0 10px;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}
.item-price {
  font-size: 14px;
  color: #f56c6c;
  margin-bottom: 5px;
}
.item-sales, .item-address, .item-fans {
  font-size: 12px;
  color: #999;
}
.favorite-item .el-icon {
  color: #999;
}
.favorite-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
  padding: 0 15px;
}
.footer-text {
  margin-left: 5px;
  font-size: 14px;
  color: #333;
}
.favorite-footer .el-button {
  margin-left: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  border-radius: 17.5px;
}
.edit-btn {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.edit-btn .el-icon {
  margin-bottom: 2px;
}
</style>    